<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/Css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="/Css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="/Css/style.css" />
    <script type="text/javascript" src="/Js/jquery.js"></script>
    <script type="text/javascript" src="/Js/jquery.sorted.js"></script>
    <script type="text/javascript" src="/Js/bootstrap.js"></script>
    <script type="text/javascript" src="/Js/ckform.js"></script>
    <script type="text/javascript" src="/Js/common.js"></script>

    <style type="text/css">
        body {
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }


    </style>

    <script type="text/javascript">
     $(function () {

         loadData(0);

         $("div[name='page']>a").click(function(){
             if(($(this).attr("class"))=='disabled'){
                 alert('return');
                 return;
             }
             alert("click");
             let num=$(this).attr("name");
             alert(num);
             loadData(num);
         })

		$('#newNav').click(function(){
				window.location.href="addUser.html";
		 });
    });

     function loadData(num){
         var pageNum=1;
         if(num==0){
             pageNum=1;
         }
         pageNum=num;
         $.ajax({
             url:"/user/list",
             type:"GET",
             data:"pageNum="+pageNum+"&size="+5,
             dataType:"json",
             success:function (vo){
                if(vo.statusCode==200){
                    var userList=vo.pageInfo.list;
                    var str;
                    for(var i=0;i<userList.length;i++){
                        var user = userList[i];
                        let userId = user.userId==null?0:user.userId;
                        let userLoginName = user.userLoginName==null?null:user.userLoginName;
                        let userTrueName = user.userTrueName==null?null:user.userTrueName;
                        let roleName = user.roleName==null?null:user.roleName;
                        let btnStr="";
                        btnStr+="<td>\n" +
                            "            <button type=\"button\" id=\"edit\" style=\"border: none;background-color: white\" onclick=\"edit(\"+userId+\")\">编辑</button>&nbsp;&nbsp;\n" +
                            "            <button type=\"button\" id=\"delete\" style=\"border: none;background-color: white\" onclick=\"delInfo(\"+userId+\")\">删除</button>\n" +
                            "        </td>";
                        str+="<tr>\n" +
                            "        <td style=\"vertical-align:middle;\"><input type=\"checkbox\" name=\"check\" value=userId></td>\n" +
                            "        <td>"+userLoginName+"</td>\n" +
                            "        <td>"+userTrueName+"</td>\n" +
                            "        <td>"+roleName+"</td>\n" +
                            " <td>"+btnStr+"</td>"+
                            "    </tr>";
                    }
                    $("#tbody").html(str);
                    fillPageData(vo.pageInfo);
                }
             }
         })
     }

     function fillPageData(pageInfo) {
         //填充信息
         $("#total").html(pageInfo.total);
         $("#pages").html(pageInfo.pages);
         $("#pageNum").val(pageInfo.pageNum);
         //设置按钮的属性值和样式
         $("#firstPage").attr("name",1);
         $("#prePage").attr("name",pageInfo.prePage);
         $("#nextPage").attr("name",pageInfo.nextPage);
         $("#lastPage").attr("name",pageInfo.pages);
         $("#firstPage").removeClass("disabled");
         $("#prePage").removeClass("disabled");
         $("#nextPage").removeClass("disabled");
         $("#lastPage").removeClass("disabled");
         if(pageInfo.isFirstPage){//如果是第一页：上一页和首页禁用
             $("#firstPage").addClass("disabled");
             $("#prePage").addClass("disabled");
         }
         if(pageInfo.isLastPage){//如果已经是最后一页：下一页和末页禁用
             $("#nextPage").addClass("disabled");
             $("#lastPage").addClass("disabled");
         }
     }

     function checkall(){
			var alls=document.getElementsByName("check");
			var ch=document.getElementById("checkall");
			if(ch.checked){
				for(var i=0;i<alls.length;i++){
					alls[i].checked=true;	
				}	
			}else{
				for(var i=0;i<alls.length;i++){
					alls[i].checked=false;	
				}	
			}
		}

     function delAll() {
         var alls = document.getElementsByName("check");
         var ids = new Array();
         for (var i = 0; i < alls.length; i++) {
             if (alls[i].checked) {
                 ids.push(alls[i].value);
             }
         }
         if (ids.length > 0) {
             if (confirm("确认删除?")) {
                 alert("删除成功!");
             }
         } else {
             alert("请选中要删除的项");
         }
     }

     function delInfo() {

     }

     function edit() {

     }
    </script>
</head>
<body>
<form class="form-inline definewidth m20" action="index.html" method="get">    
    用户名称：
    <input type="text" name="username" id="username"class="abc input-default" placeholder="" value="">&nbsp;&nbsp;  
    <button type="submit" class="btn btn-primary">查询</button>
</form>
<table class="table table-bordered table-hover definewidth m10">
    <thead>
        <tr>
            <th width="5%"><input type="checkbox" id="checkall" onChange="checkall();"></th>
            <th>用户账户</th>
            <th>真实姓名</th>
            <th>角色</th>
            <th  width="10%">操作</th>
        </tr>
    </thead>
    <tbody id="tbody">
	     <tr>
         	<td style="vertical-align:middle;"><input type="checkbox" name="check" value="1"></td>
            <td>admin</td>
            <td>管理员</td>
            <td>管理员</td>
            <td>
                <a href="editUser.html">编辑</a>&nbsp;&nbsp;&nbsp;<a href="javascript:alert('删除成功！');">删除</a>             
            </td>
        </tr>
    </tbody>
</table>
<table class="table table-bordered table-hover definewidth m10" >
  	<tr>
        <th colspan="5">
            <div class="inline pull-right page" name="page">
                <span id="total">total</span> 条记录
                <a id="firstPage"  href='javascript:void(0)' >首页</a>
                <a id="prePage" href='javascript:void(0)'>上一页</a>
                第<span id="pageNum">1</span>/<span id="pages">pages</span> 页
                <a id="nextPage" href='javascript:void(0)'>下一页</a>
                <a id="lastPage" href='javascript:void(0)' >末页</a>
            </div><div>
            <button type="button" class="btn btn-success" id="newNav">添加用户</button>&nbsp;&nbsp;&nbsp;
            <button type="button" class="btn btn-success" id="delPro" onClick="delAll();">删除选中</button>
        </div>
        </th>
    </tr>
  </table>
</body>
</html>